<!--
 * @Author: lixb
 * @Date: 2020-08-24 15:36:05
 * @LastEditTime: 2020-09-24 17:34:03
 * @Descripttion: 修改企业开票信息
-->
<template>
  <div>
    <el-drawer
      title="修改资料"
      :visible.sync="isShow"
      :direction="direction"
      size="40%"
      :wrapper-closable="false"
    >
      <div class="update-wrap">
        <el-form ref="formInfo" :model="formInfo" :rules="rules" label-width="120px">
          <el-form-item label="公司：">
            <el-input v-model="formInfo.organizationName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="税号：" prop="taxNumber">
            <el-input v-model="formInfo.taxNumber" placeholder="请输入" maxlength="18"></el-input>
          </el-form-item>
          <el-form-item label="单位地址：" prop="address">
            <el-input v-model="formInfo.address" placeholder="请输入" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="电话号码：" prop="telephone">
            <el-input v-model="formInfo.telephone" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="开户银行：" prop="openingLicense">
            <el-input
              v-model="formInfo.openingLicense"
              placeholder="请输入"
              maxlength="100"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行账号：" prop="bankCardNumber">
            <el-input
              v-model="formInfo.bankCardNumber"
              placeholder="请输入"
              maxlength="30"
            ></el-input>
          </el-form-item>
          <el-form-item label="纳税人资质：" prop="taxType">
            <el-radio v-model="formInfo.taxType" :label="1">一般纳税人</el-radio>
            <el-radio v-model="formInfo.taxType" :label="0">小规模纳税人</el-radio>
          </el-form-item>
          <el-form-item label="税票种类：">
            <span>
              {{
                formInfo.taxType == 0
                  ? '仅可开具普通发票'
                  : '开具发票时，建议开票方开增值税专用发票'
              }}
            </span>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer-button">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" :disabled="submitDisabled" @click="submitUpdate('formInfo')">
          保存
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { numberAndSpecial, isNumber } from '@/utils/regExpUtil';
  import { updateComponyInfo } from '@/api/companyInfo';
  export default {
    props: {
      formInfo: {
        required: true,
        type: Object,
      },
    },
    data() {
      const validateMobile = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入电话号码'));
          return;
        }
        if (!numberAndSpecial(value)) {
          callback(new Error('请输入正确的电话号码'));
          return;
        }
        callback();
      };
      const validateNumber = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入银行账号'));
          return;
        }
        if (!isNumber(value)) {
          callback(new Error('请输入正确银行账号,只能是数字且长度不超过30位'));
          return;
        }
        callback();
      };
      return {
        isShow: false,
        direction: 'rtl',
        submitDisabled: false,
        rules: {
          taxNumber: [{ required: true, message: '请填写税号', trigger: 'blur' }],
          address: [{ required: true, message: '请填写单位地址', trigger: 'blur' }],
          telephone: [{ required: true, validator: validateMobile, trigger: 'blur' }],
          openingLicense: [{ required: true, message: '请填写开户银行', trigger: 'blur' }],
          bankCardNumber: [{ required: true, validator: validateNumber, trigger: 'blur' }],
        },
      };
    },
    watch: {},
    mounted() {},
    methods: {
      init() {
        this.isShow = true;
      },
      submitUpdate(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.submitDisabled = true;
            updateComponyInfo(this.formInfo).then(res => {
              if (res.status == 200) {
                this.$emit('getInfo');
                this.isShow = false;
                this.$message({
                  message: '信息修改成功！',
                  type: 'success',
                });
              }
              this.submitDisabled = false;
            });
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .update-wrap {
    padding: 20px;
  }
</style>
